<template>
  <div>
    <div id="addTagBox" >
      <input 
        v-model="addTag" 
        @click="showTags" 
        @keyup.enter="dialogVisible = true" 
        type="text" 
        @change="displaySelect"
        placeholder="回车添加标签，不能含有双引号" 
        v-text="onchange"
        id="addtagInput"
        ref="inputTag"
        v-if="iShowInput">
      <Tags 
        v-for="(item,index) in tagsList" 
        v-bind:tag="item" 
        :key="item.id" 
        v-bind:content="content" 
        v-bind:itemIndex="index" 
        v-bind:list="tagsList" 
        v-on:deleteTag="deleteTag($event)"
      ></Tags>
      <span id="adduser" v-if="type!=1">添加人：{{this.instance.addUser}}</span>
      <Select v-if="show" @tag="getTag($event)" :selectTag="selectTag"></Select>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <el-radio-group v-model="tagClass">
        <el-radio-button :label="index" v-for="(item, index) in typeList" :key="index" style="margin:0 0 10px 0;border-left:1px;">{{item}}</el-radio-button>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTagtoDB">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Tags from './Tags'
import Select from './Select'
import {typeList,getSessionStore} from '../util/util.js'

export default {
  components:{
    Tags,
    Select
  },
  props:['isTopSentance','content','instance','type'],
  data(){
    return {
      addTag:'',
      tagsList:[],
      show:false,
      selectTag:[],
      iShowInput:sessionStorage.getItem('type') !== 'G',
      dialogVisible:false,
      tagClass:'',
      typeList:typeList
    }
  },
  watch:{
    addTag:function(){
      if(this.addTag.indexOf('"') >= 0){
        this.show = false
      }else if(this.addTag.length > 0){
        this.show = true
      }else{
        this.show = false
      }
    },
    content:function(val){
      var params = new URLSearchParams();
      params.append('content', val);
      params.append('tag', '');
      
      this.$http.post('http://'+this.IP+'/api/showTags.php',params)
        .then(res=>{
          let tags = []
          let data = res.data[0];
          if(data){
            for(let i = 1;i<6;i++){
              if(data['tag'+i]){
                tags.push(data['tag'+i])
              }
            }
          }
            // console.log(tags)
          this.tagsList = tags
        })
    }
  },
  computed:{
    onchange:function(){
      if(this.addTag.indexOf('"') >= 0){
          this.show = false
        }else{
          this.$http.get("http://"+this.IP+"/api/getTagList.php?m=gettags&tag="+this.addTag)
          .then((res)=>{
            var obj = []
            for(var item in res.data){
              obj.push(res.data[item].tag)
            }
            this.selectTag = obj;
          })
        };
    },
    dialogTitle(){
      return '为 '+this.addTag+' 添加分类：'
    }
  },
  methods:{
    displaySelect:function(){
      this.show = false
    },
    getTag:function(tag){
      this.addTag = tag;
      this.show = false;
      this.$refs.inputTag.focus();
    },
    hidden:function(){
      this.show = false
    },
    showTags:function(){
      if(!this.isTopSentance){
        this.tagsList = []
      }
      this.show = !this.show

      if(this.addTag.indexOf('"') >= 0){
        this.show = false;
      }
    },
    addTagtoDB:function(){
      if(this.addTag.indexOf('"') >= 0 || this.content.indexOf('"')>=0){
        alert('添加失败，语句或标签不能有双引号');
      }else if(!this.isTopSentance){
        alert('语句不能为空')
      }else{
        if(this.addTag == ''){
        alert("请添加标签")
        }else{//添加标签到数据库中
          if(!this.tagClass){
            this.dialogVisible = true
          }else{
            var params = new URLSearchParams();
            params.append('content', this.content);
            params.append('tag', this.addTag);
            params.append('type',this.tagClass);
            params.append('addUser',getSessionStore('name'))
  
            this.$http.post('http://'+this.IP+'/api/showTags.php',params)
            .then((res)=>{
              console.log(res)
              if(res.data['code'] && res.data['code'] == 1){
                alert('添加失败,标签数量达到上限');
                this.addTag = '';
              }else if(res.data['code'] && res.data['code'] == 2){
                alert('标签重复!');
                this.addTag =''
              }else{
                this.dialogVisible = false
                this.tagsList = [];//清空
                this.tagsList = res.data;
                // console.log(this.tagsList);
                this.addTag = '';
              }
              // console.log(res);
              // console.log('语句:'+this.content+',标签:'+this.addTag)
            })
          }

        }
      }
    },
    deleteTag:function(index){
      console.log(index)
      this.tagsList = index;
    },
  },
  created:function(){
    let a = {};
    if(this.instance){
      for(let i=1;i<6;i++){
        let key = 'tag'+i;
        if(this.instance[key] != ''){
          a[key] = this.instance[key];
        }
      }
      this.tagsList = a;
    }
  },
  directives:{
    focus:{
      update:function(el,value){
        if(value!=''){
          el.focus()
        }
      }
    }
  }
}
</script>
<style scoped>
  #addTagBox{
    padding: 5px;
    position: relative;
    min-height: 100px;
  }
  #addtagInput{
    width: 100%;
    display: block;
  }
  #adduser{
    position: absolute;
    right: -10%;
    bottom: -10%;
  }
</style>